{extend name="base"}
{block name="main"}

<div id="app" v-cloak>
    <el-menu mode="horizontal" :default-active="wsNav.activeIndex">
        <el-menu-item :index="v.name" v-for="v of nav" class="p0">
            <a class="block p_x20" :href="v.href" v-text="v.title"></a>
        </el-menu-item>
    </el-menu>
    
    <el-row class="ws-quote">
        <el-col :span="12">
            <el-button type="primary" size="small" @click="showExcel">导入手机号码</el-button>
            <el-button v-if="false" type="primary" size="small" @click="dialogVisible=!dialogVisible">查询手机号码是否微信号</el-button>
        </el-col>
    </el-row>
    
    <el-table @selection-change="selectionChange" :data="tableData" border stripe>
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column align="center" label="序号" width="40">
            <template slot-scope="scope">
                {{scope.$index+1}}
            </template>
        </el-table-column>
        <el-table-column prop="counts" align="center" label="总数量"></el-table-column>
        <el-table-column prop="weixins" align="center" label="微信数量" sortable></el-table-column>
        <el-table-column prop="notWeixins" align="center" label="非微信号数量" sortable></el-table-column>
        <el-table-column prop="notReads" align="center" label="未查询数" sortable></el-table-column>
        <el-table-column prop="waits" align="center" label="等待查询数" sortable></el-table-column>
        <el-table-column prop="s_time" align="center" label="导入时间" :formatter="eTimeFormats" sortable></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="onGet('{:url(\'delRows\')}?s_time='+scope.row.s_time,true)" class="ws-mini">删除</el-button>
                <el-button type="danger" size="mini" @click="onGet('{:url(\'delRows\')}?notWeixins=1&s_time='+scope.row.s_time,true)" class="ws-mini" v-if="scope.row.notWeixins>0">删除非微信号</el-button>
                <el-button type="primary" size="mini" @click="href('{:url(\'exports\')}?s_time='+scope.row.s_time,true)" class="ws-mini" v-if="scope.row.weixins>0">导出微信号</el-button>
                <el-button type="primary" size="mini" @click="href('{:url(\'detail\')}?s_time='+scope.row.s_time,true)" class="ws-mini">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    
    <div class="page">{$list->render()|raw}</div>

    <!-- 导入Excel 区域 -->
    <link rel="stylesheet" href="{:_static()}/wsvue/index.css">
    <script type="text/babel" src="{:_static()}/wsvue/excel/index.js"></script>
    <script type="text/babel" src="{:_static()}/wsvue/model/index.js"></script>

    <ws-excel :area="area" @ext-error="error" :title="title" :options="options" v-model="show" @change="change"></ws-excel>
    
    <!-- 查询手机号是否为微信号 弹框 -->
    <el-dialog title="分批查询手机号码是否为微信号" :visible.sync="dialogVisible">
        <el-row class="ws-quote">
            当前在线设备(不选将默认所有设备执行)
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-checkbox-group v-model="checkDevs">
                    <el-checkbox style="margin:3px 15px;" :label="v.id.toString()" v-for="v of devs">{{v.name}}</el-checkbox>
                </el-checkbox-group>
            </el-col>
            <el-col :span="24" class="p_y20">
                <el-button type="primary" size="mini" @click="checkAll">全选/取消</el-button>
            </el-col>
        </el-row>
        <el-row class="ws-quote">
            其它配置
        </el-row>
        <el-row>
            <el-form ref="form" label-width="120px">
                <el-form-item label="每次查询数量">
                    <el-input-number v-model="nums" :min="1" size="small"></el-input-number>
                </el-form-item>
            </el-form>
        </el-row>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="_wspost('{:url(\'queryWeixin\')}',{checkDevs,nums},queryWeixin)">确 定</el-button>
        </div>
    </el-dialog>
</div>

{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}

<script type="text/babel" type="text/javascript">
var app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        nav:{$_nav|stripslashes|raw}, 
        checkData:[], // 选中数据
        tableData:{$list->toJson()|raw}, // 列表数据

        // 导入相关
        options:['手机号码'],
        show:false,
        title:'手机号码导入',
        area:['400','400'],


        dialogVisible:false,
        devices:[], // 在线设备ID组
        devs:[], //在线设备
        checkDevs:[], //选中的设备
        nums:15, //每次查询数量
    },
    created(){
        this.init();
    },
    methods:{
        init(){
            if(socket){
                // 获取在线设备
                socket.on('getUsers',data=>{
                    if(data){
                        this.devices=data;
                        this.checkDevs=data;
                        this.getData(data);
                    }
                })
                socket.emit('getUsers',{});
            }

        },
        // 载入所有在线设备信息
        getData(ids){
            ids=ids||this.devices;
            $.post("{:url('getDevices')}",{ids},res=>{
                let data=res.data;
                if(!data){
                    data=[];
                }else if(data&&typeof data ==='string'){
                    data=JSON.parse(data);
                }
                this.devs=data;
            })
        },
        // 全选/取消 设备
        checkAll(){
            if(this.checkDevs.length===this.devices.length){
                this.checkDevs=[];
            }else{
                this.checkDevs=this.devices;
            }
        },
        // 执行查询手机号码任务
        queryWeixin(res){
            this.dialogVisible=false;
            // let checkDevs=this.checkDevs,nums=this.nums;
            // $.post("{:url('queryWeixin')}",{checkDevs,nums},res=>{
            //  if(){

            //  }
            // },'json')
        },
        // 用户选择发生改变
        selectionChange(data){
            this.checkData=data.map(item=>{
                return item.id;
            })
        },
        // 显示导入框
        showExcel(show=true){
            this.show=show;
        },
        change(data){
            this._wspost("{:url('addAll')}",{data});
            this.showExcel(false);
        },
        error(ext){
            this.$message({
                message:'错误的文件后缀名：'+ext,
                type:'error'
            })
        },
        // 状态格式化
        statusFormats(row, column, cellValue, index){
            if(cellValue==1){
                return '是微信号';
            }else if(cellValue==2){
                return '非微信号';
            }else if(cellValue==3){
                return '查询队列中';
            }else{
                return '未处理';
            }
        },
        // 查询时间格式化
        eTimeFormats(row, column, cellValue, index){
            if(!cellValue){
                return '待查询';
            }
            return this.dateFormat(cellValue*1000,'Y-m-d H:i');
        },

    }
});
</script>

{/block}